<template>
    <div>
        <h1>房号列表</h1>
        <div>
            房间号码：<input type="text" v-model="queryinfo.Num">
            <input type="button" value="查询" class="btn btn-primary" @click="show">
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <th><input type="checkbox" v-model="checked" @click="checkall"></th>
                    <th>房型</th>
                    <th>房间号码</th>
                    <th>房号描述</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item in data.list">
                    <th><input type="checkbox" :value="item.NId" v-model="ids" @change="checkone"></th>
                    <th>{{ item.NType }}</th>
                    <th>{{ item.Num }}</th>
                    <th>{{ item.NDesc }}</th>
                    <th>{{ item.PState=1?"上架":"下架" }}</th>
                    <th>
                        <input type="button" value="修改" class="btn btn-primary" >
                        <input type="button" value="删除" class="btn btn-danger" >
                    </th>
                </tr>
            </tbody>
        </table>
        <div>
            <span>共{{data.totalCount}}条</span>
            <span>共{{data.totalPage}}页</span>
            <span>{{queryinfo.pageindex}}/{{ data.totalPage }}</span>
            <input type="button" value="首页" @click="getpage(1)">
            <input type="button" value="上一页" @click="getpage(queryinfo.pageindex-1)">
            <span v-for="item in data.totalPage" @click="getpage(item)">{{ item }}</span>
            <input type="button" value="下一页" @click="getpage(queryinfo.pageindex+1)">
            <input type="button" value="尾页" @click="getpage(data.totalPage)">
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRoute, useRouter } from 'vue-router';
import { useAdminStare } from '@/stores/admin';
const adc = useAdminStare();
const route = useRoute()
const router = useRouter()

let queryinfo:any=reactive({
    pageindex:1,
    pagesize:2,
    Num:""
})

let data:any=reactive({
    "list": [],
    "totalCount": "",
    "totalPage": "",
})

let checked=ref(false)

let ids=ref([])


onMounted(()=>{
    getlist()
})

const checkall=()=>{
    checked.value=!checked.value
    if(checked.value==true){
        ids.value=data.list.map((item:any)=>{
            return item.NId
        })
    }
    else{
        ids.value=[]
    }
}


const checkone=()=>{
    if(ids.value.length==data.list.length){
        checked.value=true
    }
    else{
        checked.value=false
    }
}


const getpage=(num:any)=>{
    if(num<1){
        queryinfo.pageindex=1;
        return
    }
    if(num>data.totalPage){
        queryinfo.pageindex=data.totalPage
        return
    }
    queryinfo.pageindex=num
    checked.value=false
    getlist()
}

const show=()=>{
    queryinfo.pageindex=1;
    getlist()
}

const getlist=()=>{
    axios({
        url:'/api/House/GetHouseNumber',
        method:'get',
        params:queryinfo
    })
    .then((res)=>{
        console.log(res);
        Object.assign(data,res.data)
    })
}

</script>

<style scoped>
input{
    margin: 0 10px;
}
span{
    margin: 0 10px;
}
</style>